<style>
    .el-input__inner {
        height: 30px !important;
    }

    .layui-form .el-cascader {
        line-height: 30px;
        ;
    }
</style>
<div class="rc-pagepadding ">
    <div class=" rc-pannel rc-pagepadding">

        <div class="rc-pannel-body layui-form ">

            <table class="layui-table">
                <colgroup>
                    <col style="width: 100px;">
                    <col style="width: 180px;">
                    <col>
                    <col style="width: 60px;">
                </colgroup>
                <thead>
                    <tr>
                        <th>事件</th>
                        <th>事件名称</th>
                        <th>已挂载</th>
                        <th>挂载</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    foreach ($events as $event) {
                    ?>
                        <tr>
                            <td><?php echo $event['event']; ?></td>
                            <td><?php echo $event['title']; ?> <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="<?php echo $event['desc']; ?>" style=" color: #7D8388;"></i> </td>
                            <td><?php echo $event['event']; ?></td>
                            <td><a eventid="<?php echo $event['id']; ?>" class="primary startmount">挂载</a></td>
                        </tr>
                    <?php
                    }
                    ?>

                </tbody>
            </table>

        </div>


    </div>


</div>


<div id="selhookbox" style="position: absolute; display:none">
    <div class="rc-pannel rc-pagepadding layui-form" style="border:1px solid var(--primary-color);box-shadow:2px 2px 5px var(--primary-color);width:320px">
        <div class="rc-pannel-body">
            <div class="rc-pagepadding">
                <input type="text" id="hookident" name="hookident" autocomplete="off" value="" lay-verify="required" class="layui-input" title="" />
            </div>
        </div>

        <div class="rc-pannel-footer">
            <div style="text-align: center; padding-top:15px">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="domount">确定</button>
                <button type="button" id="cancel" class="layui-btn layui-btn-sm">取消</button>
            </div>
        </div>
    </div>
</div>
<script src="/static/admin/lib/layui/modules/cascader/cascader.js"></script>
<script>
    layui.use(function() {
        var form = layui.form;
        var layer = layui.layer;

        var layCascader = layui.layCascader;

        var el_hooks = '<?php echo $hooks ?>';
        var el_hooks_obj = $.parseJSON(el_hooks);
        console.log(el_hooks_obj);
        var el_cascader = layCascader({
            elem: '#hookident',
            filterable: true,
            options: el_hooks_obj,
            props: {
                value: 'ident',
                label: 'title',
            },

        });

        var noweventid = 0;
        var startmountobj = null;
        $('.startmount').click(function() {
            startmountobj = $(this);
            noweventid = $(this).attr('eventid');
            $('#selhookbox').show();
            $('#selhookbox').css('top', $(this).offset().top + 20 + 'px');
            $('#selhookbox').css('left', $(this).offset().left - 350 + 'px');
        });

        $('#cancel').click(function() {
            $('#selhookbox').hide();
        });

        $('#domount').click(function() {

            var hooltitle = el_cascader.getCheckedNodes().data.title +
                ' / ' + el_cascader.getCheckedNodes().parentNode.data.title;

            $.ajax({
                url: '/admin/cnf/ComponentEventGroup/mountHook', //请求路径
                type: "POST", //请求方式
                data: {
                    hook: el_cascader.getCheckedValues(),
                    groupid: <?php echo request()->get('groupid'); ?>,
                    eventid: noweventid

                }, // 默认写法
                success: function(data) {
                    if (data.code == 0) {
                        startmountobj.html(hooltitle);
                        toastr_success("挂载成功");
                        $('#selhookbox').hide();
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {

                },

            });

        });
    });
</script>